<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_VER_USUARIOS, ROLE_ACTUALIZAR_USUARIO">
<head>
	
</head>
<body>
	<div class="contenedor grande">
		<form:form commandName="modeloUsuario" action="usuarios.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			<form:hidden path="id" />
		
			<form:errors cssClass="mensaje-error-campo" />
		
			<h2><spring:message code="etiqueta.datosUsuario" text="Datos del usuario." /></h2>
			
			<!-- NO EDITABLES -->
			<div class="campo horizontal">
      			<form:label path="usuario"><spring:message code="etiqueta.usuario" text="Usuario" /></form:label>
				<form:input path="usuario" disabled="true" />
      		</div>
      		<div class="campo horizontal">
      			<form:label path="ultimoLogin"><spring:message code="etiqueta.ultimoLogin" text="Ultimo login" /></form:label>
				<form:input path="ultimoLogin" disabled="true" />
      		</div>
      		<div class="campo horizontal">
      			<form:label path="rol"><spring:message code="etiqueta.rol" text="Rol" /></form:label>
      			
      			<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
      			
      				<secured:authentication property="principal.usuario.id" var="usuarioConectado" />
      				<core:choose> 
  						<core:when test="${usuarioConectado != param.id}" > 
    						 <form:select path="idRol" cssClass="uniform-multiselect">
								<form:options items="${roles}" itemValue="id" itemLabel="nombre"/>
							</form:select>
  						</core:when> 
  						<core:otherwise> 
     						<form:input path="rol" disabled="true" />
  						</core:otherwise> 
					</core:choose>									
				</secured:authorize>
      			
      			<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="rol" disabled="true" />
				</secured:authorize>
      		</div>
      		<div class="separador">
				&nbsp;
			</div>
      		
      		<!-- PRIMER FILA -->
			<div class="campo horizontal">
				<form:label path="apellido"><spring:message code="etiqueta.apellido" text="Apellido" />
					<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
						<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
					</secured:authorize>
      			</form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.apellido" text="Apellido" var="placeholder" />
					<form:input path="apellido" maxlength="25" tabindex="1" placeholder="${placeholder}" autofocus="autofocus" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="apellido" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="apellido" disabled="true" />
				</secured:authorize>
			</div>
			<div class="campo horizontal">
				<form:label path="primerNombre"><spring:message code="etiqueta.primerNombre" text="Primer nombre" />
					<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
						<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
					</secured:authorize>
      			</form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.primerNombre" text="Primer nombre" var="placeholder" />
					<form:input path="primerNombre" maxlength="25" tabindex="2" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="primerNombre" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="primerNombre" disabled="true" />
				</secured:authorize>				
			</div>
			<div class="campo horizontal">
				<form:label path="segundoNombre"><spring:message code="etiqueta.segundoNombre" text="Segundo nombre" /></form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.segundoNombre" text="Segundo nombre" var="placeholder" />
					<form:input path="segundoNombre" maxlength="25" tabindex="3" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="segundoNombre" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="segundoNombre" disabled="true" />
				</secured:authorize>
			</div>
			<div class="separador">
				&nbsp;
			</div>
			
			<!-- SEGUNDA FILA -->
			<div class="campo horizontal">
				<form:label path="correoElectronico"><spring:message code="etiqueta.correoElectronico" text="Correo electrónico" /></form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.correoElectronico" text="Correo electrónico" var="placeholder" />
					<spring:message code="hint.correoElectronico" text="Por favor, ingrese una dirección de correo electrónico válida." var="title" />
					<form:input path="correoElectronico" maxlength="50" tabindex="4" placeholder="${placeholder}" title="${title}" cssClass="solo-email" cssErrorClass="solo-email campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="correoElectronico" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="correoElectronico" disabled="true" />
				</secured:authorize>
		    </div>
		    <div class="campo horizontal">
		    	<form:label path="telefono"><spring:message code="etiqueta.telefonoConFormato" text="Teléfono (en formato internacional)" /></form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.telefono" text="Teléfono" var="placeholder" />
					<spring:message code="hint.telefonoFijo" text="Por favor, ingrese un número de teléfono fijo." var="title" />
					<form:input path="telefono" maxlength="25" tabindex="5" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="telefono" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="telefono" disabled="true" />
				</secured:authorize>
		    </div>
		    <div class="campo horizontal">
		    	<form:label path="celular"><spring:message code="etiqueta.celularConFormato" text="Celular (en formato internacional)" /></form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
					<spring:message code="etiqueta.celular" text="Celular" var="placeholder" />
					<spring:message code="hint.telefonoCelular" text="Por favor, ingrese un número de teléfono móvil." var="title" />
					<form:input path="celular" maxlength="25" tabindex="6" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
					<form:errors cssClass="mensaje-error-campo" path="celular" />
				</secured:authorize>
				
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
					<form:input path="celular" disabled="true" />
				</secured:authorize>
			</div>
			<div class="separador">
				&nbsp;
			</div>
			
			<!-- CUARTA FILA -->
			<div class="campo comentario horizontal">
      			<form:label path="comentarios"><spring:message code="etiqueta.comentarios" text="Comentarios" /></form:label>
				
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO" var="autorizado"  />
				<core:choose>
					<core:when test="${autorizado}">
						<form:textarea path="comentarios" maxlength="500" tabindex="10" />					
					</core:when>
					<core:otherwise>
						<form:textarea path="comentarios" disabled="true" />
					</core:otherwise>
				</core:choose>
			</div>
			<div class="separador">
				&nbsp;
			</div>
			
			<!-- BOTONES -->
			<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
				<button type="submit" tabindex="7"><spring:message code="etiqueta.actualizar" text="Actualizar" /></button>
				<button type="button" tabindex="8" onclick="javascript:cancelar();"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
			</secured:authorize>
			<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_USUARIO">
				<secured:authorize ifAnyGranted="ROLE_VER_USUARIOS">
					<button type="button" tabindex="7" onclick="javascript:cancelar();"><spring:message code="etiqueta.volver" text="Volver" /></button>
				</secured:authorize>
			</secured:authorize>
		
		</form:form>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		jQuery(document).ready(function(){

			jQuery("form[id=modeloUsuario]").validity(function() {
				//Requerido. Entre 2 y 25 caracteres (inclusive)
				jQuery("#primerNombre")
					.require('<spring:message code="mensaje.primerNombreRequerido" text="Por favor, ingrese el primer nombre." />')
					.minLength(2)
					.maxLength(25);
	
				//Requerido. Entre 2 y 25 caracteres (inclusive)
	        	jQuery("#apellido")
		        	.require('<spring:message code="mensaje.apellidoRequerido" text="Por favor, ingrese el apellido." />')
					.minLength(2)
					.maxLength(25);

				//Debe ser un correo electrónico válido
				jQuery("#correoElectronico")
					.match('email');

				//Debe ser un número de teléfono fijo válido
				jQuery('#telefono')
					.assert(function(){
						var valido = true;
						var telefono = jQuery.trim(jQuery('#telefono').val());
						if(telefono.length > 0) {
							var pais = jQuery.trim(countryForE164Number(telefono));
							if(pais.length == 0) {
								pais = region;
							}
							telefono = formatE164(pais, telefono);
							valido = isValidNumber(telefono);
							if(valido) {
								jQuery('#telefono').val(telefono);
							}
						}
						return valido;
					}, '<spring:message code="mensaje.telefonoFijoInvalido" text="Por favor, ingrese un número de teléfono fijo válido." />');

				//Debe ser un número de teléfono fijo válido
				jQuery('#celular')
					.assert(function(){
						var valido = true;
						var celular = jQuery.trim(jQuery('#celular').val());
						if(celular.length > 0) {
							var pais = jQuery.trim(countryForE164Number(celular));
							if(pais.length == 0) {
								pais = region;
							}
							celular = formatE164(pais, celular);
							valido = isValidNumber(celular);
							if(valido) {
								jQuery('#celular').val(celular);
							}
						}
						return valido;
					}, '<spring:message code="mensaje.telefonoCelularInvalido" text="Por favor, ingrese un número de teléfono móvil válido." />');
        	});
        
		});
	</script>
</body>
</secured:authorize>